<template>
<div class="layerRtb layerRtb-threecolumn layerRtb-right">
    <three-title :title="{name:'性格'}"></three-title>
        <!-- <span tag="i" class="rig_close fr" @click="$parent.$parent.clickFourShow()"></span>
    </three-title> -->
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div>
            <div class="analyItem" >
                <p class="analyItemTit tx-center" :class="this.characterType === undefined || this.characterType === null || this.characterType === '' ? '' : 'analyLightGreen'">性格</p>
                 <div class="analyItemCon">
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio1">
                        <el-radio-button label="1">开朗</el-radio-button>
                        <el-radio-button label="2">谨慎</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio2">
                        <el-radio-button label="1">感性</el-radio-button>
                        <el-radio-button label="2">理性</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio3">
                        <el-radio-button label="1">敏感</el-radio-button>
                        <el-radio-button label="2">随和</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio4">
                        <el-radio-button label="1">细致</el-radio-button>
                        <el-radio-button label="2">粗糙</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio5">
                        <el-radio-button label="1">活泼</el-radio-button>
                        <el-radio-button label="2">稳重</el-radio-button>
                        </el-radio-group>
                    </p>
                    <!-- <p class="col-md-12">
                        <span class="cLightGray pr8 col-md-1">备注:</span>
                        <span class="col-md-8">
                         <el-input  v-model="input" placeholder="输入备注"></el-input>
                        </span>
                    </p> -->
                </div>
            </div>
            <!-- <div class="analyItem" >
                <p class="analyItemTit tx-center">备注</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">预留</span>
                    </p>
                </div>
            </div> -->
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon tx-center">
                <el-button type="primary" @click="updateStageInfoByleId()">提交</el-button>
                <!-- <p class="fl">
                    <span v-if="this.characterType === undefined || this.characterType === null || this.characterType === ''" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p> -->
            </div>
        </div>
    </div>

</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { updateStageInfoByleId } from '../../Resources/Api/index'
export default {

    data () {
        return {
            stageInfo: {},
            radio1: 1,
            radio2: 1,
            radio3: 1,
            radio4: 1,
            radio5: 1,
            input: '',
            characterType: ''
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    created () {
        this.stageInfo = this.$route.query.stageInfo
        this.characterType = this.stageInfo.character_type
        if (this.characterType.length > 0) {
            let characterArr = this.characterType.split(',')
            characterArr.forEach(character => {
                let arr = character.split('-')
                if (Number(arr[0]) === 1) {
                    this.radio1 = arr[1]
                } else if (Number(arr[0]) === 2) {
                    this.radio2 = arr[1]
                } else if (Number(arr[0]) === 3) {
                    this.radio3 = arr[1]
                } else if (Number(arr[0]) === 4) {
                    this.radio4 = arr[1]
                } else if (Number(arr[0]) === 5) {
                    this.radio5 = arr[1]
                }
            })
        }
    },
    methods: {
        ...mapMutations({
            setUpdatePlate: `SET_UPDATE_PLATE`
        }),
        updateStageInfoByleId () {
            let type
            let type1 = '1' + '-' + this.radio1
            let type2 = '2' + '-' + this.radio2
            let type3 = '3' + '-' + this.radio3
            let type4 = '4' + '-' + this.radio4
            let type5 = '5' + '-' + this.radio5
            type = type1 + ',' + type2 + ',' + type3 + ',' + type4 + ',' + type5
            updateStageInfoByleId({
                uid: this.leftInfo.uid,
                characterType: type // 性格类型
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('提交成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            })
        }
    },
    watch: {
        leftInfo () {
        },
        $route () {
        }
    }
}
</script>
